<template>
  <div class="mainbox">
    <banner></banner>
    <main-content :catname="title">

      <div slot="menu_list">
        <dl>
          <dt :style="{backgroundImage: 'url(' + menu_bg + ')'}" class="menu_dt"><span class="iconfont icon-xiangcun"></span>{{title}}</dt>

          <dd v-for="(item,index) in menu_list" class="menu_dd" :class="{'hover':cur_tab ==item.id }"
              @click="onTab(item)">{{item.title}}
          </dd>

        </dl>
      </div>

      <div class="inner_content" slot="inner_content">

        <NoData v-if="flag"></NoData>
        <!--<NoData v-if="menu_list.length==0"></NoData>-->

        <div v-for="(item,index) in menu_list">
          <div class="page_con" v-if="item.id == cur_tab" v-html="item.content"></div>
        </div>
      </div>

    </main-content>

    <footer-bar></footer-bar>

    <main-menu></main-menu>
  </div>
</template>

<script>
  import Banner from '@/components/bannder/Banner';
  import MainMenu from '@/components/mainmenu/MainMenu';
  import mainContent from '@/components/content/mainContent';
  import footerBar from '@/components/content/footerBar';
  import NoData from '../../components/nodata/NoData'

  export default {
    name: "Pages",
    data() {
      return {
        flag:false,
        type: '',
        page: 1,
        limit: 10,
        menu_list: [],
        cur_tab: '',
        menu_bg:'',
        title:''

      }
    },
    components: {
      Banner,
      MainMenu,
      mainContent,
      footerBar,
      NoData
    },

    created() {
      this.menu_bg=this.$util.storage.get("menu_bg");
      this.type = this.$route.query.type;
      this.title=this.$route.query.name;
      console.log('type', this.type)
      this.getContent();
    },

    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        this.type = this.$route.query.type;
        this.getContent();
      },
    },

    methods: {
      getContent() {
        let that = this;
        that.$http.get('/api/ScreenkApi/getColumnContent', {
          vollege_id: that.$util.vollege_id,
          type: that.type,
          page: that.page,
          limit: that.limit
        }, r => {
          console.log('', r);
          if (r.data.data.length==0){
            this.flag=true;
          }
          that.menu_list = r.data.data;
          that.cur_tab = r.data.data[0].id;


        })
      },

      onTab(event) {
        this.cur_tab = event.id;
      }
    }

  }
</script>

<style scoped>

  .inner_content {
    padding-top: 60px !important;
    padding-left: 70px !important;

    width: 1300px !important;
    height: 600px !important;
  }

  .page_con {
    padding-right: 0px !important;
  }

  .page_con >>> img{
    max-width: 100%;
  }

</style>
